import { useRef } from 'react';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import { Button, message } from 'antd';
import { ProFormSelect } from '@ant-design/pro-form';
import {
  PlusOutlined,
  PoweroffOutlined,
  RedoOutlined,
  UndoOutlined,
} from '@ant-design/icons';
import { getIterationList, deleteIteration } from '@/api';
import { IterationProps } from './interface';
import AddInteration from './components/add';

// 回滚
const back = () => {};

// 提交
const submit = () => {};

// 停止迭代
const stop = () => {};

// 部署
const build = () => {};

// 删除
const remove = async (id: string, action?: ActionType) => {
  try {
    await deleteIteration(id);
    message.success('删除成功');

    action?.reload();
  } catch (error) {
    message.error(error.message);
  }
};

const columns = (tableAction: ActionType | undefined): ProColumns[] => {
  return [
    {
      title: '迭代名称',
      dataIndex: 'iterativeName',
    },
    {
      title: '分支名称',
      dataIndex: 'branch',
      renderFormItem: (schema) => {
        return (
          <ProFormSelect
            width="lg"
            name="branch"
            placeholder="请选择迭代分支"
            valueEnum={{
              1: 'v1',
              2: 'v2',
            }}
          />
        );
      },
    },
    {
      title: '备注',
      dataIndex: 'iterativeRemark',
    },
    {
      title: '操作',
      render(text, record, _, action) {
        return [
          action && (
            <AddInteration key="edit" action={action} record={record}>
              <Button type="link">编辑</Button>
            </AddInteration>
          ),
          <Button type="link" key="build" onClick={() => build()}>
            部署
          </Button>,
          <Button type="link" key="submit" onClick={() => submit()}>
            提交
          </Button>,
          <TableDropdown
            key="dropdown"
            onSelect={(key: string) => {
              switch (key) {
                case 'back':
                  back();
                  break;
                case 'stop':
                  stop();
                  break;
                case 'delete':
                  remove(record.iterativeId, tableAction);
                  break;
                default:
                  return null;
              }
            }}
            menus={[
              {
                name: '回滚',
                key: 'back',
              },
              {
                name: '删除',
                key: 'delete',
              },
              {
                name: '停止迭代',
                key: 'stop',
              },
            ]}
          />,
        ];
      },
    },
  ];
};

export default (props) => {
  const actionRef = useRef<ActionType>();
  const {
    match: { params: id },
  } = props;

  return (
    <ProTable
      actionRef={actionRef}
      columns={columns(actionRef?.current)}
      toolBarRender={(action) => {
        return [
          action && (
            <AddInteration key="addIteration" action={action}>
              <Button type="primary" icon={<PlusOutlined />}>
                新增迭代
              </Button>
            </AddInteration>
          ),
        ];
      }}
      request={async (params) => {
        const res = await getIterationList({ ...id, ...params });

        const list =
          res?.data?.data.map((ret: IterationProps) => {
            ret.key = ret.iterativeId;

            return ret;
          }) || ([] as IterationProps[]);

        return {
          data: list,
          success: true,
        };
      }}
    />
  );
};
